<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>订单</title>
    <link rel="stylesheet" type="text/css" href="http://47.100.102.177:8080/app/css/common/nav.css" />
    <link rel="stylesheet" type="text/css" href="http://47.100.102.177:8080/app/css/common/foot.css" />
    <link rel="stylesheet" type="text/css" href="../../boot/plugin/layui/css/layui.css">
    <script src="http://47.100.102.177:8080/app/plugin/jquery.min.js"></script>
    <script src="../../boot/plugin/layui/layui.js"></script>
    <style type="text/css">
body,td,th {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #222222;
}
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
a:link {
	color: #222222;
}
a:visited {
	color: #333333;
}
a:hover {
	color: #FF3300;
}
a:active {
	color: #FF3300;
}

input {
	height: 14px;
	border: 1px solid #CCCCCC;
}

.tabl{
    position: relative;
    top: 50px;
    width: 1000px;
    left: 250px;
}

.addr{
    width: 850px;
}

</style>
<body>
<!--定义头部-->
<div class='nav'>
    <ul>
        <li><img src="http://47.100.102.177:8080/app/images/common/素材-大书.png"></li>
        <li><a id="first">主页</a></li>
        <li><a href='#'>分类</a>
            <ul>
                <li><a href='../index01'>图书</a></li>
                <li><a href='../index02'>电子书</a></li>
            </ul>
        </li>
        <c:if test="${user!=null}">
            <li><a href='#'>${user.uname}</a>
                <ul>
                    <li><a href='../car/shoppingcar?account=${user.account}'>购物车</a></li>
                    <li><a href='../personal/center?status=1'>个人信息</a></li>
                    <li><a href='../order/order'>订单信息</a></li>
                </ul>
            </li>
            <li><a href="/boot/users/exit">安全退出</a></li>
        </c:if>
        <li><a href='../login'>登陆</a></li>
        <li><a href='../login'>注册</a></li>
    </ul>
</div>
<div class="tabl">
    <table  class="layui-table" lay-size="sm" >
        <td><table class="layui-table" lay-size="sm">
          <tr bgcolor="#FFFFFF">
            <td align="right">姓名：</td>
            <td class="addr">&nbsp;</td>
          </tr>
          <tr bgcolor="#FFFFFF">
            <td align="right">联系电话：</td>
            <td  class="addr">&nbsp;</td>
          </tr>
          <tr bgcolor="#FFFFFF">
            <td align="right">联系地址：</td>
            <td  class="addr">&nbsp;</td>
          </tr>
          <tr bgcolor="#FFFFFF">
            <td align="right">邮编：</td>
            <td  class="addr">&nbsp; </td>
          </tr>
            <button type="button" onclick="adres()" class="layui-btn layui-btn-normal">选择地址</button>
        </table></td>
      </tr>
    </table>
    <br>
    <table class="layui-table" lay-size="sm">
      <tr bgcolor="#E8EFF3">
        <td colspan="5" > <strong> 订单详细信息: </strong> </td>
      </tr>
      <tr align="center" bgcolor="#FFFFFF">
        <td bgcolor="#FFFFFF" width="250px"> 商品名称</td>
          <td bgcolor="#FFFFFF">商品图片</td>
        <td bgcolor="#FFFFFF"> 价格  </td>
      <td bgcolor="#FFFFFF"> 数量 </td>
        <td bgcolor="#FFFFFF"> 小计 </td>
      </tr>
     <c:forEach items="${carlist}" var="a">
         <input type="hidden" value="${a.userId}" id="user">
         <input type="hidden" value="${a.id}" class="car">
      <tr bgcolor="#FFFFFF">
        <td bgcolor="#ffffff" >${a.name}</td>
          <td bgcolor="#ffffff" style="text-align: center"><img src="${a.imgUrl}" ></td>
        <td bgcolor="#FFFFFF">${a.price}</td>
      <td bgcolor="#FFFFFF">${a.num}</td>
        <td bgcolor="#FFFFFF">${a.total}&nbsp;</td>
      </tr>
     </c:forEach>
      <tr align="right" bgcolor="#FFFFFF">
        <td colspan="5"> 商品合计：￥<span class="jg" style="color: red"></span></td>
        </tr>
      <tr align="right" bgcolor="#FFFFFF">
        <td colspan="5"> 运费合计：￥<span class="jg" style="color: red"></span></td>
      </tr>
        <tr align="right" bgcolor="#FFFFFF">
            <td colspan="5"> 您是<span id="vip" style="color: red"></span>,优惠<span id="del_price" style="color: red"></span>%</td>
        </tr>
      <tr align="right" bgcolor="#FFFFFF">
        <td colspan="5"> <strong>订单总计：￥<span class="jg" style="color: red"></span></strong> </td>
      </tr>
        <tr align="right" bgcolor="#f0f8ff">
            <td colspan="5">
             <form  class="layui-form" action="">
            <div class="layui-form-item">
                <label class="layui-form-label">支付方式:</label>
                <div class="layui-input-block">
                    <input class="pays" type="radio"  name="pay" value="1" title="支付宝" checked>
                </div>
            </div>
             </form>
            </td>
        </tr>
	  <tr align="right" bgcolor="#FFFFFF">
	    <td colspan="5"> <button id="commit" type="button" class="layui-btn layui-btn-danger">提交订单</button> </td>
	  </tr>
        </tr>
    </table>
</table>
</div>
<!--底部-->
<div class="foot">
    <!-- 多快好省start -->
    <div class="dkhs">
        <ul>
            <li>
                <div class="duo"></div>
                <p>品类齐全，轻松购物</p>
            </li>
            <li>
                <div class="kuai"></div>
                <p>多仓直发，急速配送</p>
            </li>
            <li>
                <div class="hao"></div>
                <p>正平行货，精致服务</p>
            </li>
            <li>
                <div class="sheng"></div>
                <p>天天低价，畅选无忧</p>
            </li>
        </ul>
    </div>
    <!-- 多快好省end -->
    <!-- 结尾start -->
    <div class="jiewei">
        <div class="j1">
            <ul>
                <li><a href="#">关于我们</a></li>
                <li class="line"></li>
                <li><a href="#">关于我们</a></li>
                <li class="line"></li>
                <li><a href="#">关于我们</a></li>
                <li class="line"></li>
                <li><a href="#">关于我们</a></li>
                <li class="line"></li>
                <li><a href="#">关于我们</a></li>
                <li class="line"></li>
                <li><a href="#">关于我们</a></li>
                <li class="line"></li>
                <li><a href="#">关于我们</a></li>
                <li class="line"></li>
                <li><a href="#">关于我们</a></li>
                <li class="line"></li>
                <li><a href="#">关于我们</a></li>
                <li class="line"></li>
                <li><a href="#">关于我们</a></li>
                <li class="line"></li>
                <li><a href="#">关于我们</a></li>
                <li class="line"></li>
                <li><a href="#">English</a></li>
                <li class="line"></li>
                <li><a href="#">Site</a></li>
                <li class="line"></li>
                <li><a href="#">Media & IR</a></li>
                <li class="line"></li>
            </ul>
        </div>
        <div class="j2">
            <p>云上书屋收录的免费书籍作品、频道内容、书友评论、用户上传文字、图片等其他一切内容及在云上书屋所做之广告均属用户个人行为，与本网站无关。
            </p>
        </div>
        <div class="j3">
            <ul>
                <li class="l1"><a href="#"></a></li>
                <li class="l2"><a href="#"></a></li>
                <li class="l3"><a href="#"></a></li>
                <li class="l4"><a href="#"></a></li>
                <li class="l5"><a href="#"></a></li>
                <li class="l6"><a href="#"></a></li>
            </ul>
        </div>
    </div>
    <!-- 结尾end -->
    <div class="layui-tab layui-tab-card" id="address" style="display: none">
        <ul class="layui-tab-title">
            <li class="layui-this"></li>
            <li id="one">地址一</li>
            <li id="two">地址二</li>
            <li id="three">地址三</li>
            <li id="four">地址四</li>
            <li id="five">地址五</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item"></div>
            <c:forEach items="${addresslist}" var="d">
                <div class="layui-tab-item">
                    <table class="layui-table">
                        <colgroup>
                            <col width="150">
                            <col width="200">
                            <col>
                        </colgroup>
                        <thead>
                        <tr>
                            <th>收货人</th>
                            <th>手机号码</th>
                            <th>详细地址</th>
                            <th>邮政编码</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <input type="hidden" class="aid" value="${d.id}">
                            <td  class="mes">${d.name}</td>
                            <td  class="mes">${d.phone}</td>
                            <td  class="mes">${d.address}</td>
                            <td  class="mes">${d.zipCode}</td>
                        </tr>
                        </tbody>
                    </table>
                    <button type="button" class="layui-btn layui-btn-warm"  class="quire"  onclick="choice()">确定</button>
                </div>
            </c:forEach>
        </div>
    </div>
</div>
</body>

<script>
    let qd=document.getElementsByClassName("quire");
    let msge=document.getElementsByClassName("mes");
    let addr=document.getElementsByClassName("addr");
    let count;
    let one=document.getElementById("one");
    let two=document.getElementById("two");
    let three=document.getElementById("three");
    let four=document.getElementById("four");
    let five=document.getElementById("five");
    let p;
    let f;
    let t;
    let jg=document.getElementsByClassName("jg");
    let aid=document.getElementsByClassName("aid");
    let pay=document.getElementsByClassName("pays");
    let did;
    let pid;
    let uid=document.getElementById("user").value;
    let sub=document.getElementById("commit");
    let date=new Date();
    let datestr=date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate()+" "+date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();
    let c=document.getElementsByClassName("car");
    let e=document.getElementById("time");
    let vip = document.getElementById("vip");
    let del_price = document.getElementById("del_price");
    let vipId = ${people.vipId};
    $.get('/boot/orderindex/vipName',{vipId:vipId},function (res){
        vip.innerHTML=res;
    })
    del_price.innerHTML=${people.vipId}


    function adres() {
        layer.open({
            type: 1,
            content: $('#address')
        });
    }

    function choice(){
        addr[0].textContent=msge[count].textContent;
        addr[1].textContent=msge[count+1].textContent;
        addr[2].textContent=msge[count+2].textContent;
        addr[3].textContent=msge[count+3].textContent;
        did=aid[count/4].value;
        layer.closeAll();
    }

    one.onclick=()=>{
        count=0;
    }
    two.onclick=()=>{
        count=4;
    }
    three.onclick=()=>{
        count=8;
    }
    four.onclick=()=>{
        count=12;
    }
    five.onclick=()=>{
        count=16;
    }

    function getQueryVariable(variable)
    {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i=0;i<vars.length;i++) {
            var pair = vars[i].split("=");
            if(pair[0] == variable){return pair[1];}
        }
        return(false);
    }

    for (let i = 0; i <pay.length ; i++) {
        if(pay[i].checked==true){
            pid=pay[i].value;
        }
    }
    p=getQueryVariable("price");
    f=getQueryVariable("freight");
    t=getQueryVariable("totlmoney")*((100-${people.vipId})/100)*1;
    jg[0].textContent=p;
    jg[1].textContent=f;
    jg[2].textContent=t;

    sub.onclick=()=>{
        var time=10;
        if(did==null){
            layer.msg("请填写地址！")
        }
        else {
            let parm={uid:uid,pid:pid,did:did,tmoney:t,date:datestr}
            $.post("/boot/buy",parm,function (resg) {
                layer.load(0)
                layer.msg(resg.msg);
                $.post("/boot/buy/add",function (res){
                    layer.msg(res.msg);
                    window.location="/boot/payOrder?orderSn="+res.data+"&id="+resg.data;
                })
            })
        }
   }

   $.get("/boot/shoprecommed",{uid:${people.peopleId}},function x() {

    })

</script>
</html>
